//  访客数据 - 柱状图
import { ref } from "vue";
import { graphic } from "echarts/core";
import { slcieData, compitedMax } from '@/utils/tools';
import { setFontSize, listenResize } from '@/utils/px_rem';

const option = ref({}) as any;

function initCharts(names: any[], lists: any[]) {
  if (names.length === 0) {
    option.value = {};
    return;
  }

  const max: any = compitedMax(lists) || 5;

  option.value = {
    grid: {
      left: "3%",
      right: "3%",
      bottom: "0%",
      top: "24%",
      containLabel: true,
    },
    title: {
      text: '单位：人',
      top: '3%',
      left: '1%',
      textStyle: {
        color: "#a8acae",
        fontWeight: 'normal',
        fontSize: setFontSize(14)
      }
    },
    xAxis: {
      type: "category",
      data: names,
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#ffffff",
        },
      },
      axisLabel: {
        show: true,
        color: "#b4e4ff",
        fontSize: setFontSize(14),
        margin: setFontSize(12),
      },
    },
    yAxis: {
      type: "value",
      splitNumber: 5, // 设置 Y 轴只显示 5 个刻度值
      min: 0, // 设置 Y 轴最小值
      max, // 设置 Y 轴最大值
      axisLabel: {
        color: "#b4e4ff",
        fontSize: setFontSize(14),
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(28, 130, 197, .3)",
          type: "dashed",
        },
      },
    },
    series: [
      {
        type: "bar",
        data: lists,
        barWidth: setFontSize(16),
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#1CFFD9",
            },
            {
              offset: 1,
              color: "rgba(15, 216, 255, 0.2)",
            },
          ]),
          opacity: .7,
        },
        label: {
          normal: {
            show: true,
            lineHeight: setFontSize(30),
            formatter: '{c}',
            position: 'top',
            textStyle: {
              color: '#00D6F9',
              fontSize: setFontSize(20),
              fontFamily: 'SJyunhei',
            }
  
          }
        }
      },
    ],
  };
}

let t: any = null;
function setOption(data: any[] = []) {
  openAnimation(data);
}

function openAnimation(data: any = [], step: any = 6) {

  const names: any[] = [];
  const lists: any[] = [];

  data.forEach((item: any) => {
    item.title = item.title.slice(6);
    names.push(item.title);
    lists.push(item.value);
  });

  let start: any = 0;
  let end: any = step;

  const callback: any = formatData(names, lists);

  // 默认执行
  callback(start, end);

  if (t) clearInterval(t);

  if (names.length > step) {
    t = setInterval(() => {
      start += 1;
      end += 1;
      if (end > names.length) {
        start = 0;
        end = step;
      }
      callback(start, end);
    }, 3000);
  }

  listenResize(() => callback(start, end));
}


function formatData(names: any = [], lists: any = []) {
  return (start: any = 0, end: any = 6) => {
    const curNames: any = slcieData(names, start, end);
    const curLists: any = slcieData(lists, start, end);
    initCharts(curNames, curLists);
  }
}


export default function useOption(): any[] {
  return [option, setOption];
}
